<template>
	<div class="page">
		<Header :title="'首页'" />

		<div class="banner"><Banner /></div>

		<Notice :noticeData="noticeData" />

		<BackTop />

		<div class="list">
			<ul>
				<li v-for="(item, index) in dataList">
					<div class="li-item">
						<span>{{ item }}</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup>
import Swiper from '@mall/assets/plugins/swiper5.3.0/swiper.min.js';
import '@mall/assets/plugins/swiper5.3.0/swiper.min.css';
import Header from './components/header/index.vue';
import Banner from './components/banner/index.vue';
import Notice from './components/notice/index.vue';
import BackTop from './components/backTop/index.vue';

const dataList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];
const bannerList = [1, 2, 3, 4];

const noticeData = [
	{
		activityDescription: '今天星期五了，明天不上班！今天星期五了，明天不上班！今天星期五了，明天不上班！今天星期五了，明天不上班！今天星期五了，明天不上班！'
	}
];
</script>

<style lang="scss" scoped>
@import '@mall/assets/css/common';

.page {
	height: 100%;
	padding: rem(90) 0 0 0;
	background: #f8f8f8;

	.banner {
		background: #eee;
	}

	.list {
		margin: rem(20) 0 0 0;
		padding: 0 0 rem(200) 0;

		ul {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding: 0 rem(20);
		}

		li {
			width: 50%;
			padding-bottom: rem(20);

			&:nth-child(odd) {
				padding-right: rem(10);
			}

			&:nth-child(even) {
				padding-left: rem(10);
			}

			.li-item {
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: rem(10);
				border-radius: rem(10);
				min-height: rem(400);

				// box-shadow: rem(1) rem(1) rem(16) #eee;
				span {
					font-size: rem(36);
				}
			}
		}
	}
}
</style>
